<template>
    <div class="schedule">
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.state" placeholder="请选择日程状态" clearable>
                    <el-option v-for="item in items" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select v-model="query.type" placeholder="请选择日程类型" clearable>
                    <el-option v-for="item in typeItems" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-button style="display: inline-block; margin-left: 10px" type="primary" @click="handleSearch">搜索</el-button>
                <el-button style="display: inline-block; margin-left: 10px" type="primary" @click="editVisible = true">添加日程</el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="content" label="日程内容" show-overflow-tooltip=true width="200"></el-table-column>
                <el-table-column prop="estimatedTime" label="预计完成时间" width="150"></el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="150"></el-table-column>
                <el-table-column prop="actualTime" label="实际完成时间" width="150"></el-table-column>
                <el-table-column prop="type" label="日程类型" :formatter="handleType" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type === 0" type="info">日常计划</el-tag>
                        <el-tag v-else-if="scope.row.type === 1">周计划</el-tag>
                        <el-tag v-else-if="scope.row.type === 2" type="success">月计划</el-tag>
                        <el-tag v-else-if="scope.row.type === 3" type="warning">年计划</el-tag>
                        <el-tag v-else-if="scope.row.type === 4" type="danger">人生计划</el-tag>
                        <el-tag v-else>其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="日程状态" :formatter="handleState">
                    <template #default="scope">
                        <el-tag v-if="scope.row.state === 0" type="info">未开始</el-tag>
                        <el-tag v-else-if="scope.row.state === 1">进行中</el-tag>
                        <el-tag v-else-if="scope.row.state === 2" type="success">已完成</el-tag>
                        <el-tag v-else-if="scope.row.state === 3" type="danger">已取消</el-tag>
                        <el-tag v-else>其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="添加时间" width="160"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button  :disabled="scope.row.state === 2 || scope.row.state === 3" type="text" icon="el-icon-edit"  @click="handleEdit(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.current"
                    :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="修改" v-model="editVisible" width="50%" @closed="onClosed">
            <el-form label-width="100px">
                <el-form-item label="日程内容" prop="title">
                    <el-input v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="预计完成时间" prop="estimatedTime">
                    <el-input v-model="form.estimatedTime"></el-input>
                </el-form-item>
                <el-form-item label="日程状态" prop="state">
                    <el-radio-group v-model="form.state">
                        <el-radio :label=0 name="0">未开始</el-radio>
                        <el-radio :label=1 name="1">进行中</el-radio>
                        <el-radio :label=2 name="2">已完成</el-radio>
                        <el-radio :label=3 name="3">已取消</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="日程类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label=0 name="0">日常计划</el-radio>
                        <el-radio :label=1 name="1">周计划</el-radio>
                        <el-radio :label=2 name="2">月计划</el-radio>
                        <el-radio :label=3 name="3">年计划</el-radio>
                        <el-radio :label=4 name="4">人生计划</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" v-if="add" @click="handleAdd">确 定</el-button>
                    <el-button type="primary" v-else @click="saveEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>

<script>
import { ref, reactive, inject } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {addSchedule, deleteSchedule, getScheduleList, updateSchedule} from "../api";

export default {
    name: "notice",
    setup() {
        const loading = ref(true);
        const imageUrl = ref('');
        const imageVisible = ref(false);
        const add = ref(true);
        const query = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
            state: null,
            type: null,
        });
        const items = [
            {id: 0, name: "未开始"},
            {id: 1, name: "进行中"},
            {id: 2, name: "已完成"},
            {id: 3, name: "已取消"},
        ];
        const typeItems = [
            {id: 0, name: "日常计划"},
            {id: 1, name: "周计划"},
            {id: 2, name: "月计划"},
            {id: 3, name: "年计划"},
            {id: 4, name: "人生计划"},
        ];
        const tableData = ref([]);
        const pageTotal = ref(0);
        const reload  = inject("reload");

        // 获取表格数据
        const getData = () => {
            loading.value = true;
            getScheduleList(query).then((res) => {
                if (res.code === 200) {
                    tableData.value = res.data.content;
                    query.total = res.data.count;
                } else {
                    ElMessage.error(res.message);
                }
            }).finally(e => {
                loading.value = false;
            });
        };
        getData();

        // 删除操作
        const handleDelete = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {
                type: "warning",
            }).then(() => {
                deleteSchedule(row.id).then(res => {
                    if (res.code === 200) {
                        reload();
                        ElMessage.success('删除成功');
                    } else {
                        console.log("[删除日程] 失败: " + res.message);
                        ElMessage.error(res.message);
                    }
                })
            }).catch(() => {});
        };

        const saveEdit = () => {
            updateSchedule(form.value).then(res => {
                if (res.code === 200) {
                    reload();
                    ElMessage.success('修改成功');
                } else {
                    console.log("[修改日程] 失败: " + res.message);
                    ElMessage.error(res.message);
                }
            });
            editVisible.value = false;
        };

        // 表格编辑时弹窗和保存
        const editVisible = ref(false);
        let form = ref({
            id: null,
            estimatedTime: '',
            content: '',
            state: null,
            type: null
        });
        const handleEdit = (index, row) => {
            console.log("handleEdit", row);
            form.value = row;
            console.log("handleEdit", form.value);
            add.value = false;
            editVisible.value = true;
        };
        const handleState = (row, column) => {
            if (row.state === 0) return "未开始";
            if (row.state === 1) return "进行中";
            if (row.state === 2) return "已完成";
            if (row.state === 3) return "已取消";
            return "其他";
        };

        const handleType = (row, column) => {
            if (row.type === 0) return "日常计划";
            if (row.type === 1) return "周计划";
            if (row.type === 2) return "月计划";
            if (row.type === 3) return "年计划";
            if (row.type === 4) return "人生计划";
            return "其他";
        };

        const handleAdd = () => {
            console.log("handleAdd", form);
            addSchedule(form.value).then(res => {
                if (res.code === 200) {
                    reload();
                    ElMessage.success("添加成功");
                } else {
                    console.log("[添加日程] 失败: " + res.message);
                    ElMessage.error('服务器繁忙，请稍后重试');
                }
            });
            editVisible.value = false;
        };


        const onClosed = () => {
            console.log("dialog");
            form.value = {
                id: null,
                estimatedTime: '',
                content: '',
                state: null,
                type: null
            };
            add.value = true;
        };

        // 查询操作
        const handleSearch = () => {
            query.current = 1;
            getData();
        };
        // 分页导航
        const handlePageChange = (val) => {
            query.current = val;
            getData();
        };


        return {
            query,
            tableData,
            pageTotal,
            editVisible,
            form,
            imageUrl,
            loading,
            imageVisible,
            items,
            add,
            typeItems,
            handleSearch,
            handlePageChange,
            handleDelete,
            handleEdit,
            saveEdit,
            handleState,
            handleType,
            handleAdd,
            onClosed
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
    /*text-align: center;*/
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.schedule {
    display: block;
    margin-top: 70px;
    margin-left: 1vw;
    margin-right: 1vw;
    min-height: 60vh;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
}
</style>
